entry 打包入口配置
接受三种方式：string， array， object
module.exports = { entry: './src/main.js' ...}复制代码 module.exports = { entry: ['./src/main.js', './src/test.js'] ...}复制代码 module.exports = { entry: { main: './src/main.js', test: './src/test.js' } ...}复制代码 output 打包导出配置
module.exports = { entry: { main: './src/main.js', a: './src.a.js' }, output: { path: './dist', filename: 'js/[name]-[chunkhash].js', publicPath: 'http://cdn.com/' } ...}复制代码 path：打包后导出的文件路径
filename：打包后的文件名
[name]对应文件名[hash]打包文件hash值[chunkhash]打包后每个单独文件的hash值复制代码
publicPath：打包上线环境，用来替换文件路径
plugins 插件系统(数组)
html-webpack-plugin 自动化生成项目中的html页面
通过npm安装
$ npm install html-webpack-plugin --save-dev复制代码
在webpack.config.js中
var htmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: { main: './src/main.js', a: './src/a.js', b: './src/b.js', c: './src/c.js' }, output: { path: './dist', filename: [name]-[chunkhash].js, public: 'http:cdn.com/' }, plugins: [ //创建一个htmlWebpackPlugin对象，并传入值 new htmlWebpackPlugin({ template: 'index.html', //生成html文件的模板文件 filename: 'a.html', //目标文件的名称 inject: false, //插入html文档中的位置，value分别为 true，false，head，body title: 'this is a.html', // 传入的html的title excludeChunks: ['b', 'c'] // 引入的除b.js 与c.js以外的js文件 }), new htmlWebpackPlugin({ template: 'index.html', filename: 'b.html', inject: false, title: 'this is b.html', excludeChunks: ['a', 'c'] }), new htmlWebpackPlugin({ template: 'index.html', filename: 'c.html', inject: false, title: 'this is c.html', excludeChunks: ['a', 'b'] }) ]}复制代码 index.html模板文件
<%= htmlWebpackPlugin.options.title %> <% for (var k in htmlWebpackPlugin.files.chunks) { %> <% if (k != 'main') { %> <% } %> <% } %>复制代码
html-webpack-plugin更多api移步查看
涉及webpack源码的
关于html-webpack-plugin插件的使用，工程源码为多页面应用
git clone https://github.com/kingzez/webpack-demo.git复制代码
首先切换到
git checkout html-webpack-plugin复制代码
并执行 npm install 完成依赖的安装后执行 npm run webpack 查看效果。
Loaders
- babel-loader
- css-loader
- style-loader
- postcss-loader
- less-loader
- sass-loader
- html-loader
- ejs-loader
- file-loader
- url-loader
- image-webpack-loader
Loader中所有项目源码均为单页面应用。
Loaders 同样也是一个数组，需要定义在一个module中
module: { loaders: [ ... ]}复制代码 babel-loader
babel-loader 用于对ES6的代码的转换，首先在终端中执行npm
npm install --save-dev babel-loader babel-core复制代码
然后再webpack.config.js中加入
module.exports = { context: '__dirname', entry: './src/app.js', output: { path: './dist', filename: 'js/[name].bundle.js' }, module: { loaders: [{ test: /\.js$/, loader: 'babel', include: path.resolve(__dirname, 'src'), //path.resolve node的api，用于处理路径；__dirname为当前项目目录， exclude: path.resolve(__dirname, 'node_modules'), query: { presets: ['latest'] // babel的配置，可在webpack.config.js中配置也可在package.json或创建.babelrc文件 } } ] }}复制代码 css-loader & style-loader & postcss-loader
css-loader 用于处理css模块的打包, style-loader 用于将打包好的css模块插入html中,安装
npm install --save-dev css-loader复制代码
npm install --save-dev style-loader复制代码
在webpack.config.js中加入
loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' // loader处理顺序是css-loader打包css文件，后通过style-loader插入到html中 }]复制代码 在处理浏览器兼容的情况下，需要对各个浏览器加前缀，这时需要css后处理器postcss-loader，安装
npm install --save-dev postcss-loader复制代码
npm install --save-dev autoprefixer // 自动添加前缀复制代码
在webpack.config.js中加入
module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader' // loader处理顺序post-loader处理后加上浏览器的前缀，再由css-loader打包css文件，后通过style-loader插入到html中 } ]},postcss: [ require('autoprefixer')({ browsers: ['last 5 versions'] //浏览器的最新五个版本 })],复制代码 如果多个css文件之间存在@import，以上配置还需要修改
module: { loaders: [ { test: /\.css$/, loader: 'style!css?importLoaders=1!postcss' // css-loader的importLoaders参数可以解决@import的css文件不处理的问题 } ]},postcss: [ require('autoprefixer')({ browsers: ['last 5 versions'] //浏览器的最新五个版本 })],复制代码 关于babel-loader css-loader style-loader postcss-loader 的使用，工程源码
git checkout css-style-postcss-loader复制代码
并执行 npm install 完成依赖的安装后执行 npm run webpack 查看效果。
less-loader & sass-loader
less-loader 是对less文件进行处理打包，安装
npm install --save-dev less-loader复制代码
在webpack.config.js中加入
loaders: [ { test: /\.less$/, loader: 'style!css!postcss!less' }]复制代码 关于less-loader 的使用，工程源码
git checkout less-loader复制代码
并执行 npm install 完成依赖的安装后执行 npm run webpack 查看效果。
sass-loader同理不做过多介绍，简单看一下webpack.config.js
loaders: [ { test: /\.scss$/, loader: 'style!css!postcss!sass' }]复制代码 html-loader & ejs-loader
html-loader 和 ejs-loader 用于处理模板文件，如果你在一个js文件中import html from 'somewhere'，接着 npm run webpack 会看到报错信息，说没有处理器处理html文件，so 安装
npm install --save-dev html-loader复制代码
同样也可以处理ejs模板文件，该ejs模板文件的扩展名也可以自定义，这里我们定义tpl
npm install --save-dev ejs-loader复制代码
看一下在 webpack.config.js 中
loaders: [ { test: /\.html$/, loader: 'html-loader' }, { test: /\.tpl/, loader: 'ejs-loader' }]复制代码 关于html-loader ejs-loader 的使用，工程源码，可分别执行
git checkout less-loader复制代码
并执行 npm install 完成依赖的安装后执行 npm run webpack 查看html-loader的效果。
git checkout ejs-loader复制代码
并执行 npm install 完成依赖的安装后执行 npm run webpack 查看ejs-loader的效果。
file-loader & url-loader & image-webpack-loader
用于处理图片以及其他文件，例子中对图片处理，先用file-loader处理，那么安装
npm install --save-dev file-loader复制代码
安装完成后对webpack.config.js配置进行修改
loaders: [ { test: /\.png|jpg|gif|svg$/i, //用于匹配各种扩展名结尾的文件 loader: 'file-loader', query: { name: 'assets/[name]-[hash:5].[ext]' // 可选 用于将图片打包到assets文件夹中 } }]复制代码 在根目录中的index.html css 中的img background 的图片引用一般为相对路径，最佳解决方案为线上的CDN绝对路径，在模板文件中的图片引用如果一定要使用相对路径的话，需要这样
复制代码
详细代码请看我的工程项目源码，关于 file-loader 的使用，工程源码，执行
git checkout file-loader复制代码
并执行 npm install 完成依赖的安装后执行 npm run webpack 查看 file-loader 的效果。
url-loader 同样也可以实现图片的处理，安装
npm install --save-dev url-loader复制代码
安装完成后，看一下webpack.config.js
loaders: [ { test: /\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 处理 loader: 'url-loader', query: { limit: 20000, //定义限制图片打包大小，超过限制值，会将图片转成base64写入 name: 'assets/[name]-[hash:5].[ext]' } }]复制代码 较好的方案是 url-loader 与 image-webpack-loader 结合使用，安装
npm install --save-dev image-webpack-loader复制代码
安装完成后，看一下webpack.config.js中
loaders: [ { test: /\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 处理 loaders: [ 'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]', 'image-webpack' ] }]复制代码 首先通过 image-webpackloader 压缩图片后处理再由url-loader处理，通过参数limit限制图片大小，图片超过limit限制的值将转成base64，如果没超过限制值，则正常打包图片。
关于 url-loader 与 image-webpack-loader 的使用，工程源码，执行
git checkout image-webpack-loader复制代码
并执行 npm install 完成依赖的安装后执行 npm run webpack 查看 url-loader 与 image-webpack-loader 结合的效果。
完整的webpack.config.js demo查看，请执行
git checkout release复制代码
本纪实经过本人实际操作后的记录，算为入门级的实践。